<script setup lang="ts">
import { onMounted, watch, reactive, computed } from 'vue';
import dayjs from 'dayjs';
const props = withDefaults(
  defineProps<{
    /**
     *
     * 那一天的时间戳
     * 例如:2023-10-25 00:00:00.000 时间戳
     */
    timestamp: number;
    /**
     * 会议使用情况
     */
    isFullRoom?: boolean[];
  }>(),
  {
    timestamp: 0,
    isFullRoom: () => [],
  },
);

const emits = defineEmits<{
  /**
   * 时间区间：30分钟 或者1个小时
   *
   */
  (e: 'onSelected', startTime: number, endTime: number): void;
}>();

const state = reactive<{
  /**
   * checkbox实现多选
   * 最多勾选2个
   * value:index值
   * text: 展示的时间
   * statue: false 可选  true 不可选
   */
  list: { value: string; text: string; status: boolean }[];
  /**
   * 最终勾选的结果集合
   * 1.一个
   * 2.相邻
   */
  checkboxValues: string[];
}>({
  list: [],
  checkboxValues: [],
});

//30分钟，会议间隔
const halfHour = 30 * 60 * 1000;

//选择日期的6:00开始
const meetingStartTime = dayjs(props.timestamp)
  .hour(6)
  .minute(0)
  .second(0)
  .millisecond(0)
  .valueOf();
/**
 * 创建36个时间区间的时间戳
 * 6:00-6:30
 * 6:30-7:00
 * 7:00-7:30
 * ...
 * 需要注意最后一个
 * 23:30-23:59:59秒
 *
 */
function create36TimeRange() {
  for (let index = 0; index < 36; index++) {
    const startTime = meetingStartTime + halfHour * index;
    //需要注意最后一个
    //23:30-23:59:59秒
    const endTime = index === 35 ? startTime + halfHour - 1 * 1000 : startTime + halfHour;
    state.list.push({
      value: `${index}`,
      text: `${dayjs(startTime).format('HH:mm')} - ${dayjs(endTime).format('HH:mm')}`,
      //当props有值之后
      status: props.isFullRoom ? props.isFullRoom[index] : false,
    });
  }
}

/**
 * 网络异步时候，第一个调用这个方法
 *
 */
watch(
  () => props.isFullRoom,
  () => {
    //更新status状态
    state.list.forEach((item, index) => {
      item.status = props.isFullRoom[index];
    });
  },
);

onMounted(() => {
  create36TimeRange();
});

/**
 * 新的集合,保存旧集合的信息
 * 分三种情况
 * 1.没有选择的情况
 * 2.选中两个的情况
 *   除了选中，其他都不能选
 * 3.选中一个的情况
 *   除了选中的
 *   选中前半个小时
 *   选中后半个小时
 *   其他都不能选择
 */
const newList = computed(() => {
  return state.list.map((item) => {
    //没有选择的情况
    if (state.checkboxValues.length === 0) return { ...item };
    //选中两个的情况
    if (state.checkboxValues.length === 2)
      return { ...item, status: !state.checkboxValues.includes(item.value) };
    //选中一个的情况
    //选中的时间
    if (state.checkboxValues.includes(item.value)) {
      return { ...item, status: false };
    }
    const selectedIndex = Number(state.checkboxValues[0]);

    //选中的前一个
    if (
      selectedIndex > 0 &&
      item.value === (selectedIndex - 1).toString() &&
      item.status === false
    ) {
      return { ...item };
    }
    //选中的后一个
    if (item.value === (selectedIndex + 1).toString() && item.status === false) {
      return { ...item };
    }
    //其他都不可选
    return { ...item, status: true };
  });
});

/**
 *
 */
function selectTimeRange() {
  const { startTime, endTime } = timeRangeMerge();
  emits('onSelected', startTime, endTime);
}

function timeRangeMerge() {
  if (state.checkboxValues.length === 0) {
    return { startTime: 0, endTime: 0 };
  }

  if (state.checkboxValues.length === 1) {
    const index = Number(state.checkboxValues[0]);
    return timestampByIndex(index);
  }

  //选择两个半小时
  const indexOne = Number(state.checkboxValues[0]);
  const indexTwo = Number(state.checkboxValues[1]);
  //排序和合并
  if (indexOne < indexTwo) {
    return timestampByIndex(indexOne, indexTwo);
  } else {
    return timestampByIndex(indexTwo, indexOne);
  }
}

/**
 * 获取时间戳根据index
 * @param index 数组中的索引
 */
function timestampByIndex(startIndex: number, endIndex?: number) {
  const startTime = meetingStartTime + halfHour * startIndex;
  let endTime = 0;
  if (endIndex) {
    endTime = endIndex === 35 ? startTime + halfHour * 2 - 1 * 1000 : startTime + halfHour * 2;
  } else {
    endTime = startIndex === 35 ? startTime + halfHour - 1 * 1000 : startTime + halfHour;
  }

  return { startTime, endTime };
}

/**
 * 点击处理
 */
function changeHandle() {
  selectTimeRange();
}
</script>
<template>
  <scroll-view
    class="app-popup__wrapper"
    :style="{ height: '64vh' }"
    :scroll-y="true"
    :lower-threshold="100"
  >
    <view class="app-time-range-list-selector__wrapper">
      <nut-checkbox-group
        class="app-time-range-list-selector__checkbox-group"
        v-model:model-value="state.checkboxValues"
        @change="changeHandle"
      >
        <view
          v-for="item in newList"
          :key="item.value"
          class="app-time-range-list-selector__content"
        >
          <nut-checkbox :label="item.value" :disabled="item.status">
            <view>
              <text>{{ item.text }}</text>
            </view>
          </nut-checkbox>
        </view>
      </nut-checkbox-group>
    </view>
  </scroll-view>
</template>
<style lang="scss">
.app-time-range-list-selector {
  padding: 20px;
  &__wrapper {
    padding: 40px 0;
    background-color: #fff;
  }
  &__checkbox-group {
    display: block;
  }

  &__content {
    display: flex;
    align-items: center;
    min-height: 80px;
    border-top: #ccc solid 1px;
    &:last-child {
      border-bottom: #ccc solid 1px;
    }
  }
}
</style>
